import { useTranslation } from 'react-i18next';
import styles from "../index.module.scss";
import image1 from '../assets/image_1.png';
import image2 from '../assets/image_2.png';
import image3 from '../assets/image_3.png';
import image4 from '../assets/image_4.png';

export default function GeneratedComponent() {
  const { t } = useTranslation();

  return (
    <div className={styles.page}>
      <div className={styles.wrap}>
        <div className={styles.container}>
          <div className={styles.content}>
            <div className={styles.main}>
              <div className={styles.text}>{t('错位色觉')}</div>
            </div>
            <div className={styles.main1}>
              <div className={styles.section}>
                <div className={styles.subSection}></div>
              </div>
              <div className={styles.text1}>{t('知识科普')}</div>
            </div>
            <div className={styles.main2}>
              <div className={styles.section1}>
                <div className={styles.subSection1}></div>
              </div>
              <div className={styles.text2}>{t('疫病知识')}</div>
            </div>
          </div>
          <div className={styles.content1}>
            <div className={styles.main3}>
              <div className={styles.section2}>
                <div className={styles.subSection2}>
                  <div className={styles.text3}>
                    一级大标题-32pt-semibold
                    <span className={styles.text3__seg1}>-</span>行高48px
                  </div>
                  <div className={styles.block}>
                    <div className={styles.subBlock}>
                      <div className={styles.text4}>
                        更新时间：2024年10月30日
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <img
                src={image1}
                className={styles.image}
              />
            </div>
          </div>
          <div className={styles.content2}>
            <div className={styles.section3}>
              <div className={styles.subSection3}>
                <div className={styles.block1}>
                  <div className={styles.text5}>二级标题-20-medium</div>
                  <div className={styles.text6}>
                    正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号
                  </div>
                </div>
              </div>
              <div className={styles.subSection4}>
                视频图片占位
              </div>
            </div>
          </div>
          <div className={styles.content3}>
            <div className={styles.main5}>
              <div className={styles.text7}>二级标题-20-medium</div>
              <div className={styles.text8}>
                <div className={styles.text8__linebreak}>
                  正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号
                </div>
                <div className={styles.text8__linebreak}>&nbsp;</div>
                <div>
                  常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;正文14号&nbsp;常规&nbsp;
                </div>
              </div>
            </div>
          </div>
          <div className={styles.content4}>
            <div className={styles.main6}>
              <div className={styles.section4}>
                <div className={styles.subSection5}>
                  <div className={styles.text9}>下一篇：文章标题</div>
                </div>
                <img
                  src={image2}
                  className={styles.image1}
                />
              </div>
            </div>
          </div>
          <div className={styles.content5}>
            <div className={styles.main7}>
              <div className={styles.text10}>{t('文档内容是否对您有帮助?')}</div>
              <div className={styles.section5}>
                <div className={styles.subSection6}>
                  <div className={styles.block3}>
                    <div className={styles.subBlock1}>
                      <img
                        src={image3}
                        className={styles.image2}
                      />
                      <div className={styles.text11}>{t('有帮助')}</div>
                    </div>
                  </div>
                  <div className={styles.block3} style={{ marginLeft: 12 }}>
                    <div className={styles.subBlock1}>
                      <img
                        src={image4}
                        className={styles.image2}
                      />
                      <div className={styles.text11}>{t('没帮助')}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
